<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css">
		<style type="text/css">
			body{
				background: #F8FAFC;
			}
			* {
				padding: 0;
			}

			a {
				text-decoration: none;
				color: black;
			}

			ul {
				list-style: none;
			}

			.box {
				position: fixed;
				top: 30px;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: url(images/1.png);
			}

			.main {
				width: 350px;
				height: 400px;
				padding: 20px;
				border-radius: 10px;
				background-color: white;
				/*-webkit-box-shadow: 6px 9px 13px 3px rgba(222,225,230,1);
    -moz-box-shadow: 6px 9px 13px 3px rgba(222,225,230,1);
    box-shadow: 6px 9px 13px 3px rgba(222,225,230,1);*/
			}

			.main-top {
				display: flex;
				flex-direction: row;
				margin-left: 10px;
				margin-bottom: 15px;
			}

			.active {
				border-bottom: 3px solid #FF0000;
			}

			.main-top div {
				width: 50px;
				height: 60px;
				text-align: center;
				line-height: 60px;
			}

			.container h2 {
				text-align: center;
			}

			input {
				border: none;
				outline: none;
			}

			.main-item {
				text-align: center;
			}

			.main-item input {
				width: 300px;
				height: 55px;
				padding-left: 20px;
				border-radius: 6px;
				background-color: #F1F1F2;
			}

			.submit {
				width: 300px;
				height: 50px;
				background-color: red;
				color: white;
				text-align: center;
				line-height: 50px;
				margin: auto;
				border-radius: 30px;
				margin-bottom: 15px;
			}

			.getpassword {
				position: absolute;
				top: 10px;
				right: 22px;
			}

			.setting {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin-left: 13px;
				margin-top: 10px;
				color: #9199A1;
				margin-bottom: 20px;
				font-size: 15px;
			}

			.setting-right div {
				width: 80px;
				height: 20px;
				float: left;
			}

			.setting-right {
				margin-left: 40px;
			}

			.main-bottom {
				display: flex;
				flex-direction: row;
				margin-left: 50px;
			}

			.textLogin {
				width: 120px;
				border-right: 1px #E7E8E8 solid;
			}

			.main-bottom i {
				margin-left: 20px;
			}

			#tips {
				float: left;
				margin: 2px 0 0 20px;
			}

			#tips span {
				float: left;
				width: 50px;
				height: 20px;
				color: #fff;
				overflow: hidden;
				background: #ccc;
				margin-right: 2px;
				text-align: center;
			}

			#tips.s1 .active {
				background: #f30;
			}

			#tips.s2 .active {
				background: #fc0;
			}

			#tips.s3 .active {
				background: #cc0;
			}

			#tips.s4 .active {
				background: #090;
			}

			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			select{
				z-index: 99;
			}
		</style>
		<script src="jquery.js"></script>
		<script language="JavaScript">
			window.onload = function() {
				var nav = document.getElementById('main-top');
				var oNav = nav.getElementsByTagName('div');
				var container = document.getElementById('container');
				var oDiv = container.getElementsByClassName('tab');
				for (var i = 0; i < oNav.length; i++) {
					oNav[0].className = 'active'
					oNav[i].index = i;
					oNav[i].onclick = function() {
						for (var i = 0; i < oNav.length; i++) {
							oNav[i].className = '';
							oDiv[i].style.display = "none";
						}
						this.className = 'active';
						oDiv[this.index].style.display = "block"
					}
					for (var m = 1; m < oNav.length; m++) {
						oNav[m].className = '';
						oDiv[m].style.display = "none";
					}
				}
			
				var submit = document.getElementById('submit');
				submit.onclick = function() {
					if (document.input1.value = '') {
						alert("///////");
					}
				}
			
			
				var item = document.getElementById('getpassword');
				var password = item.getElementsByClassName('iconfont');
				var input = document.getElementById('input1');
				console.log(password);
				password[0].onclick = function() {
					password[0].hidden = true;
					password[1].hidden = false;
					input.type = 'password';
				}
				password[1].onclick = function() {
					password[1].hidden = true;
					password[0].hidden = false;
					input.type = 'text';
				}
			
				var oTips = document.getElementById("tips");
				var oInput = document.getElementById('input1');
				var aSpan = oTips.getElementsByTagName("span");
				var aStr = ["弱", "中", "强", "非常好"];
				var i = 0;
			
				oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
					for (i = 0; i < aSpan.length; i++)
						aSpan[i].className = aSpan[i].innerHTML = "";
			
					var index = checkStrong(this.value);
					oTips.className = "s" + index;
			
			
			
					aSpan[index - 1].className = "active";
					aSpan[index - 1].innerHTML = aStr[index - 1];
				}
			
			};
			
			function checkStrong(sValue) {
				var modes = 0;
				if (sValue.length < 6) return modes;
				if (/\d/.test(sValue)) modes++; //数字
				if (/[a-z]/.test(sValue)) modes++; //小写
				if (/[A-Z]/.test(sValue)) modes++; //大写  
				if (/\W/.test(sValue)) modes++; //特殊字符
				switch (modes) {
					case 1:
						return 1;
						break;
					case 2:
						return 2;
						break;
					case 3:
					case 4:
						return sValue.length < 12 ? 3 : 4
						break;
				}
			}
			function out() {
				alert("1");
				if (window.event.toElement.id != "menu" && window.event.toElement.id != "link")
					menu.style.visibility = "hidden";
			}
			function click()
			 {
				if (event.button==2) 
				{
				  alert('不要单击右键哦！')
			    }
			}
			document.onmousedown=click 
			$().ready(function() {
				$("select").change(function() {
					var x = $(this).val();
					$("body").css("backgroundColor", x);
				})
			})
		</script>
	</head>
	<body>
		<select>
			<option value="none">none</option>
			<option value="yellow">yellow</option>
			<option value="red">red</option>
			<option value="pink">pink</option>
		</select>
		<div class="box" id="box">
			<div class="main" style="box-shadow: 0px 10px 38px -12px rgba(0,0,0,0.75);">
				<div class="main-top" id="main-top">
					<div>登录</div>
					<div>注册</div>
				</div>

				<div id="container">
					<!-- 登陆内容 -->
					<div class="tab">
						<div class="main-item" style="margin-bottom: 30px;position: relative;">
							<input type="text" name="" placeholder="请在这里输入您的账号" onblur="check1()" onfocus="check2()" id="input-1">
							<i id="iconfont1" class="iconfont icon-jinggao" style="position: absolute;top: 60px;left: 20px;color: #FF0000;font-size: 15px;"
							 hidden="true">账号不能为空</i>
						</div>
						<div class="main-item">
							<div style="position:relative;">
								<input id="input1" type="password" name="" placeholder="请在这里输入您的密码" maxlength="16">
								<div id="tips"><span></span><span></span><span></span><span></span></div>
								<i id="iconfont1" class="iconfont icon-jinggao" style="position: absolute;top: 60px;left: 20px;color: #FF0000;font-size: 15px;"
								 hidden="true">密码不能为空</i>
								<div id="getpassword">
									<i class="iconfont icon-chakan getpassword" style="font-size: 35px;" hidden="true"></i>
									<i class="iconfont icon-jinkan getpassword" style="font-size: 35px;"></i>
								</div>
							</div>
						</div>
						<div class="setting">
							<label><input type="checkbox" name="">7天内自动登陆</label>
							<div class="setting-right">
								<div style="border-right: 3px #E7E8E8 solid;margin-right: 15px;">找回密码</div>
								<div>无法登录</div>
							</div>
						</div>
						<a href="">
							<div class="submit" id="submit">登录</div>
						</a>
						<div class="main-bottom">
							<div class="textLogin">手机短信登录</div>
							<div>
								<i class="iconfont icon-weibo" style="font-size: 25px;"></i>
								<i class="iconfont icon-logo-wechat" style="font-size: 20px;"></i>
								<i class="iconfont icon-qq" style="font-size: 20px;"></i>
							</div>
						</div>
					</div>


					<!-- 注册内容 -->
					<div class="tab">
						<div class="main-item" style="margin-bottom: 30px;">
							<input type="text" name="" placeholder="请输入注册手机号"></input>
						</div>
						<div class="main-item">
							<div>
								<input id="input1" type="password" name="" placeholder="请输入验证码" style="margin-bottom: 50px;">
							</div>
						</div>
						<div class="submit">注册</div>
					</div>

				</div>


			</div>
		</div>
		
	</body>
</html>
